<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img src="../assets/order_center/shangs.png">
      </div>
      <span>个人信息认证</span>
      <div class="right">
      </div>
    </div> -->
		<div class="ts">
			<div class="bar">
				<div class="hui">
					<span>手机号校验</span>
				</div>
				<div class="xian"></div>
				<div class="red">
					<span>个人信息认证</span>
				</div>
			</div> 
		</div>
		  <yd-cell-group>
        <yd-cell-item>
            <span slot="left">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
            <yd-input :show-clear-icon="false" slot="right" v-model="name"   placeholder="请输入姓名"></yd-input>
        </yd-cell-item>
		<yd-cell-item>
            <span slot="left">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
            <yd-input  :show-clear-icon="false" slot="right" v-model="phone"   placeholder="请输入电话号码"></yd-input>
        </yd-cell-item>
		<yd-cell-item>
            <span slot="left">证件号码：</span>
            <yd-input :show-clear-icon="false" slot="right" v-model="id_number" placeholder="请输入证件号码"></yd-input>
        </yd-cell-item>
		<yd-cell-item>
            <span slot="left">证件地址：</span>
            <yd-input :show-clear-icon="false" slot="right" v-model="id_addre" placeholder="请输入证件地址"></yd-input>
        </yd-cell-item>
		<yd-cell-item>
            <span slot="left">银行卡号：</span>
            <yd-input :show-clear-icon="false" type='number' slot="right" v-model="bank_number" placeholder="请输入银行卡号"></yd-input>
        </yd-cell-item>
		<yd-cell-item>
            <span slot="left">开户银行：</span>
            <yd-input :show-clear-icon="false" slot="right" v-model="bank_name" placeholder="请输入开户银行(例如：建设银行)"></yd-input>
        </yd-cell-item>
		<yd-cell-item>
            <span slot="left">银行地址：</span>
            <yd-input :show-clear-icon="false" slot="right" v-model="bank_addre" placeholder="请输入银行地址(省市县/区+支行名称)"></yd-input>
        </yd-cell-item>
    </yd-cell-group>
		<div class="center">
			<div class="xx">
				<span>证照信息</span>
			</div>
			<div class="big">
				<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					  :data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl" :src="imageUrl" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl" class="el-upload__text">上传身份证（人面像）</div>
				</el-upload>
			</div>
			<div class="big">
				<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					  :data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess1"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl1" :src="imageUrl1" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl1" class="el-upload__text">上传身份证（国徽面）</div>
				</el-upload>
			</div>
			<div class="short">
				<div class="box">
					<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					  :data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess2"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl2" :src="imageUrl2" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl2" class="el-upload__text">上传手持身份证照片</div>
				</el-upload>
				</div>
				<div class="box">
					<el-upload
  					class="avatar-uploader"
  					action="/api/upload"
					  :data="{token:token,user_id:myid}"
  					:show-file-list="false"
  					:on-success="handleAvatarSuccess3"
  					:before-upload="beforeAvatarUpload">
  					<img v-if="imageUrl3" :src="imageUrl3" class="avatar">
  					<i v-else class="el-icon-upload avatar-uploader-icon"></i>
					<div v-if="!imageUrl3" class="el-upload__text">上传手持银行卡照片</div>
				</el-upload>
				</div>
			</div>
			<div class="btn">
			<button class="next" @click="resubmitClick()">确认提交信息</button>
		</div>
		</div>
		
	</div>
</template>

<script>
export default {
  name: "phone_approve",
  data() {
    return {
      imageUrl: "",
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      name: "", //姓名
      phone: "", //电话
      id_number: "", //证件号码
      id_addre: "", //证件地址
      bank_number: "", //银行卡号
      bank_name: "", //开户银行
      bank_addre: "", //开户银行地址
      card_front_picture: "", //身份证正面
      card_back_picture: "", //身份证反面
      hand_card_picture: "", //手持身份证
      hand_bank_card_picture: "" //手持银行卡
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    //条件信息验证
    resubmitClick() {
      if (!this.name) {
        this.$dialog.toast({ mes: "请输入姓名" });
        return;
      }
      if (!this.id_number) {
        this.$dialog.toast({ mes: "请输入证件号码" });
        return;
      }
      if (!this.id_addre) {
        this.$dialog.toast({ mes: "请输入证件地址" });
        return;
      }
      if (!this.id_addre) {
        this.$dialog.toast({ mes: "请输入证件地址" });
        return;
      }
      if (!this.bank_number) {
        this.$dialog.toast({ mes: "请输入银行卡号" });
        return;
      }
      if (!this.bank_name) {
        this.$dialog.toast({ mes: "请输入开户银行" });
        return;
      }
      if (!this.bank_addre) {
        this.$dialog.toast({ mes: "请输入开户银行地址" });
        return;
      }
      if (!this.card_front_picture) {
        this.$dialog.toast({ mes: "请上传身份证正面照" });
        return;
      }
      if (!this.card_back_picture) {
        this.$dialog.toast({ mes: "请上传身份证反面照" });
        return;
      }
      if (!this.hand_card_picture) {
        this.$dialog.toast({ mes: "请上传手持身份证照" });
        return;
      }
      if (!this.hand_bank_card_picture) {
        this.$dialog.toast({ mes: "请上传手持银行卡照" });
        return;
      }
      let self = this;
      let url = "/api/login/user_check";
      self.httpPost(
        url,
        {
          user_id: this.myid,
          token: this.token,
          type: 8,
          name: this.name,
          id_number: this.id_number,
          id_addre: this.id_addre,
          bank_number: this.bank_number,
          bank_name: this.bank_name,
          bank_addre: this.bank_addre,
          card_front_picture: this.card_front_picture,
          card_back_picture: this.card_back_picture,
          hand_card_picture: this.hand_card_picture,
          hand_bank_card_picture: this.hand_bank_card_picture
        },
        function(res) {
          if (res.code == 200) {
            self.$dialog.toast({ mes: res.msg });
            setTimeout(function() {
              self.$router.push("./mine");
            }, 1000);
          }
        }
      );
    },

    //图片上传成功的回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.card_front_picture = res.data;
    },
    handleAvatarSuccess1(res, file) {
      this.imageUrl1 = URL.createObjectURL(file.raw);
      this.card_back_picture = res.data;
    },
    handleAvatarSuccess2(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      this.hand_card_picture = res.data;
    },
    handleAvatarSuccess3(res, file) {
      this.imageUrl3 = URL.createObjectURL(file.raw);
      this.hand_bank_card_picture = res.data;
    },

    //上传的限制条件
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isGif = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isPNG && !isGif) {
        this.$dialog.toast({ mes: "只能是JPG,Png,gif格式!" });
      }
      if (!isLt2M) {
        this.$dialog.toast({ mes: "上传图片不能大于20M" });
      }
      return (isJPG && isLt2M) || isPNG || isGif;
    }
  },
  created() {
    document.title = "个人信息认证";
    //获取token和userid
    this.token = localStorage.getItem("mytoken");
    this.myid = localStorage.getItem("myid");
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  margin-bottom: 0.01rem;
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.ts {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid #cecece;
}
.ts .bar {
  width: 4.02rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ts .bar .red span {
  color: #e63f3f;
  font-size: 0.32rem;
}
.ts .bar .xian {
  width: 0.5rem;
  height: 0.05rem;
  background: #999;
}
.ts .bar .hui span {
  color: #999;
  font-size: 0.32rem;
}
.center {
  width: 100%;
  background: #fff;
  padding: 0 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.center .xx {
  width: 100%;
  height: 0.9rem;
  display: flex;
  align-items: center;
}
.center .xx span {
  font-size: 0.32rem;
  color: #333;
}
.center .big {
  width: 100%;
  height: 2.6rem;
  background: #f2f2f2;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.3rem;
}
.center .short {
  width: 100%;
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.center .short .box {
  width: 48%;
  height: 2.6rem;
  background: #f2f2f2;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.center .btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
.center .btn .next {
  width: 100%;
  height: 0.9rem;
  background: #e63f3f;
  border: none;
  border-radius: 10px;
  font-size: 0.32rem;
  color: #fff;
  margin-top: .2rem;
}
.big .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.big .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.big .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 380px;
  height: 110px;
  line-height: 143px;
  text-align: center;
}
.big .avatar {
  width: 380px;
  height: 143px;
  display: block;
}
.short .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.short .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.short .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 182px;
  height: 110px;
  line-height: 143px;
  text-align: center;
}
.short .avatar {
  width: 182px;
  height: 143px;
  display: block;
}
</style>
<style>
.el-upload__text{
  margin: .2rem 0!important;
}
</style>



